<!--
 @description 客户管理菜单筛选
 @fileName index.vue
 @author zengqiongying
 @created 2022/10/21 16:21:56
-->
<template>
  <div v-if="navData.length>0" class="customer-nav-filters" @scroll.stop>
    <div class="customer-nav-head" @touchmove.stop>
      <div class="nav-items">
        <div
          v-for="(item, i) in navData"
          :key="i"
          :class="['nav-item', {'active': curType===item.value}]"
          @click.stop="seleckClickHandle(i,item)"
        >{{ item.name }}</div>
        <div class="btn-filter" @click.stop="openFilter">
          筛选 <img class="icon" src="@/assets/icon-filter.png">
        </div>
      </div>
      <div v-if="curType===0" class="status-filter">
        <!-- 只有当页签为公共客户池时显示 -->
        <div
          v-for="(item,i) in statusList"
          :key="i"
          :class="['s-item',{'active':curStatus===item.value}]"
          @click.stop="statusClickHandle(item)"
        >{{ item.name }}</div>
      </div>
    </div>
    <div v-show="showFilter" class="filter-bar" @click.stop="closeHandle">
      <Scroll vertical class="scroll-height" @click.native.stop>
        <Card @reset="resetHandle" @confirm="confirmHandle">
          <FilterItem ref="filterBox" v-model="filterData" :status="curStatus" :pool-type="curType" />
        </Card>
      </Scroll>
    </div>
    <div class="customer-list-page" :class="{'follow-list':curType===0}">
      <slot />
    </div>
  </div>
</template>

<script>
import Scroll from '@/components/Scroll'
import Card from './Card'
import FilterItem from './FilterItem'
export default {
  name: 'CustomerNavFilter',
  components: {
    Card, Scroll, FilterItem
  },
  props: {

  },
  data() {
    return {
      selectedIndex: 0,
      routeQueryType: this.$route.query.type || '', // 路由带入的type值，用于定位当前所属页签:1 潜客、2 意向客户
      commonPoolStatus: this.$route.query.status || '', // 路由带入的，用于定位公共客户池状态类型： 0,1,2,3
      curType: 0, // 当前所选客户类型: 0 公告客户池 , 1 潜在客户， 2 意向客户
      curStatus: 0, // 当前所选公共客户池状态
      statusList: [
        { name: '全部', value: 0 },
        { name: '待分配', value: 1 },
        { name: '已分配', value: 2 },
        { name: '流失', value: 3 }
      ],
      showFilter: false,
      filterTempData: {},
      filterData: {}
    }
  },
  computed: {
    navData() {
      const t = this.$store.getters.userInfo
      const positionCodes = t.positionCodes || []
      const tabs = []
      // 1、经销商 top_dis、经理 top_dis_mg、线上对接人 top_online_mg、店长 top_shop_mg、设计主管 top_design_mg，至少拥有这些职位其中一个，才能有‘公共客户池’。
      const commonPoolCodes = ['top_dis', 'top_dis_mg', 'top_online_mg', 'top_shop_mg', 'top_design_mg']
      const commonAuth = positionCodes.some(v => commonPoolCodes.includes(v))
      if (commonAuth) {
        tabs.push({ name: '公共客户池', value: 0 })
      }
      // 2、导购 top_shopping_guide、 设计师 top_designer、设计主管 top_design_mg 拥有“意向客户”权限
      if (positionCodes.some(v => ['top_shopping_guide', 'top_designer', 'top_design_mg'].includes(v))) {
        tabs.push(...[{ name: '意向客户', value: 2 }])
      }

      // 3、导购 top_shopping_guide 拥有‘潜在客户池’
      const myPoolCodes = ['top_shopping_guide']
      const myAuth = positionCodes.some(v => myPoolCodes.includes(v))
      if (myAuth) {
        tabs.push(...[{ name: '潜在客户', value: 1 }])
      }
      return tabs
    }
  },
  watch: {
    navData: {
      handler(v) {
        if (v && v.length > 0) {
          let defaultType = v[0].value
          if (['1', '2'].includes(this.routeQueryType)) {
            // 判断路由参数中是否包含 意向客户2 和 潜客 1
            const flag = v.some(o => o.value === Number(this.routeQueryType))
            if (flag) {
              defaultType = Number(this.routeQueryType)
            }
          }

          this.curType = defaultType
          if (this.curType === 0) {
            let defaultStatus = 0
            if (['1', '2', '3', '0'].includes(this.commonPoolStatus)) {
              // 判断路由参数中是否包含 公共客户池状态
              defaultStatus = Number(this.commonPoolStatus)
            }
            this.curStatus = defaultStatus
          }
        } else {
          this.curType = -1
        }
      },
      immediate: true
    },
    curType: {
      handler(val, old) {
        this.updateFilterData()
        this.$emit('change', {
          type: this.curType,
          status: this.curStatus
        })
      },
      immediate: true
    },
    curStatus: {
      handler(val, old) {
        this.updateFilterData()
        this.$emit('change', {
          type: this.curType,
          status: this.curStatus
        })
      },
      immediate: true
    },
    showFilter() {
      this.limitScroll()
    }
  },

  created() {
    this.$on('next', this.next)
    this.$on('prev', this.prev)

    const date = new Date()
    const mDate = date.setFullYear(date.getFullYear() - 2)
    this.caledarMinDate = new Date(mDate)
  },
  activated() {

  },

  mounted() {

  },

  methods: {
    seleckClickHandle(i, item) {
      if (this.selectedIndex === i) return
      if (i === 0) {
        this.curStatus = 1
      }
      this.selectedIndex = i
      this.curType = item.value
      this.$emit('change', {
        type: this.curType,
        status: this.curType === 0 ? this.curStatus : '',
        filter: {}
      })
    },
    statusClickHandle(item) {
      if (item.value === this.curStatus) return
      this.curStatus = Number(item.value || 0)
      this.$emit('change', {
        type: 0,
        status: item.value,
        filter: {}
      })
    },
    // 切换一级导航
    prev() {
      let index = this.selectedIndex + 1
      if (index >= this.navData.length) {
        index = 0
      }
      this.seleckClickHandle(index, this.navData[index])
    },
    next() {
      let index = this.selectedIndex - 1
      if (index < 0) {
        index = this.navData.length - 1
      }
      this.seleckClickHandle(index, this.navData[index])
    },
    // 限制滚动
    limitScroll() {
      if (this.showFilter) {
        document.body.classList.add('limit-scroll')
      } else {
        document.body.classList.remove('limit-scroll')
      }
    },
    // 更新筛选条件
    updateFilterData() {
      this.filterData = {}
      this.filterTempData = {}
    },
    // 打开筛选
    openFilter() {
      this.showFilter = true
    },
    // 单击背景关闭
    closeHandle() {
      this.resetHandle()
      this.showFilter = false
    },
    // 重置选择
    resetHandle() {
      this.$refs.filterBox.resetData(this.filterTempData)
    },
    // 确定筛选
    confirmHandle() {
      this.filterTempData = JSON.parse(JSON.stringify(this.filterData))
      this.$emit('change', {
        type: this.curType,
        status: this.curStatus,
        filter: this.filterData
      })

      this.showFilter = false
    }
  }
}

</script>
<style lang='less' scoped>
  .customer-nav-filters{
    position: relative;
    padding-bottom: 6px;
    .customer-nav-head{
      position: fixed;
      top:122px;
      left: 0;
      width: 100%;
      z-index: 99;
      background: #FFFFFF;
      box-shadow: 0px 2px 14px 0px rgba(0,0,0,0.07);
    }
    .nav-items{
      position: relative;
      height: 44px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .nav-item{
        position: relative;
        height: 44px;
        padding: 0 15px;
        line-height: 44px;
        font-size: 16px;
        color: #B5B7C4;
        font-weight: 500;
        white-space: nowrap;
        &.active{
          color: #343640;
          &::after{
            content: '';
            position: absolute;
            left: 50%;
            bottom: 5px;
            transform: translateX(-50%);
            width: 20px;
            height: 4px;
            background: #16BC83;
            border-radius: 3px;
          }
        }
      }
      .btn-filter{
        color: #B5B7C4;
        font-size: 14px;
        padding: 0 16px 0 10px;
        display: flex;
        align-items: center;
        .icon{
          margin-left: 3px;
          width: 12px;
          height: 12px;
          font-size: 12px;
        }
      }
    }
  }
  .status-filter{
    padding: 12px 0 10px;
    background: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .s-item{
      margin: 0 16px;
      width: 63px;
      height: 26px;
      box-sizing: border-box;
      border-radius: 6px;
      background: #FFFFFF;
      border: 1px solid rgba(181, 183, 196, 0.3);
      color: #B5B7C4;
      font-size: 12px;
      line-height: 24px;
      text-align: center;
      &.active{
        color: #16BC83;
        background: rgba(22, 188, 131, 0.12);
        border-color: rgba(22, 188, 131, 0.12);
      }
    }
  }

  .customer-list-page{
    flex: 1;
    margin-top: 126px;
    padding-top: 16px;
    box-sizing: border-box;
    position: relative;
    min-height: 50vh;
    box-sizing: border-box;
    .page-list{
      padding:0 16px;
    }
    .c-list-scroll{
      min-height: calc(100vh - 142px - 46px - 80px);
      box-sizing: border-box;
    }
    &.follow-list{
      margin-top: 174px;
      .c-list-scroll{
        min-height: calc(100vh - 190px - 46px - 80px);
      }
    }
    /deep/.page-slide-list{
      padding: 0 16px;
    }
  }

  .filter-bar{
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 1001;
    background-color: rgba(3, 3, 3, 0.7);
    padding-top:46px;
    .scroll-height{
      background-color: #fff;
      max-height: calc(100vh - 46px);
    }
  }
</style>
